@include('../header')
<div class="body_bg">
	<div class="container">
		<!-- 主列表 -->
		<ul class="ul_nav left">
			<li class="active" >
				<a class="li_01 active" href="/invitation/1/edit">编辑喜帖</a>
			</li>
			<li >
				<a class="li_02" href="/invitation/list">查看喜帖</a>
			</li>
			<li >
				<a class="li_04" href="/invitation/bless">祝福留言</a>
			</li>
			<li >
				<a class="li_05" href="/invitation/attend">出席名单</a>
			</li>
		</ul>

		<div class="left container_box" id="container" isDemo="{{$isDemo}}" invitation="{{$id}}">
			<!-- 编辑顺序 -->
			<ul id="edit-tit">
			  <li id="one1" class="teb active" onclick="teb_edit(1)" style="margin-left:0;" ><a onclick="return false" href="">喜帖模板</a></li>
			  <li id="one2" class="teb" onclick="teb_edit(2)" ><a href="" onclick="return false">填写信息</a></li>
			  <li id="one3" class="teb" onclick="teb_edit(3)" ><a href="" onclick="return false">视频照片</a></li>
			  <li id="one4" class="teb" onclick="teb_edit(4)" ><a href="" onclick="return false">答谢信息</a></li>
			</ul>

			<!-- 第一步：选择模板  -->
			<div id="con_one_1" class="step one">
				<div class="ground">
					<label class="left">模板分类选择：</label>
					<div class="model">
					   <ul id="category_edit" class="model-tit" model="{{$model_id}}" category="{{$category_id}}">
						</ul>
						<div id="model_cont_edit">
						</div>
					</div>
				</div>
				<div class="submit">
					<input class="btn_submit" type="submit" onclick="step1()" value="下一步">
				</div>				
			</div>

			<!-- 第二步：基本信息 -->
            <div id="con_one_2" class="step two none" style="margin-left: -30px;">
                <script src="/laydate/laydate.js"></script>
                <style type="text/css">.input-box{float: left;}.mt-20px{clear: both;}</style>
                <div class="mt-20px">
                    <div class="input-box">
                        <label >新郎姓名：</label>
                        <input type="text" id="boy_name" onblur="check('boy_name')" value="{{$boy_name}}"><br />
                        <span style="margin-left:130px;" id="boy_name_error">*</span>
                    </div>
                    <div class="input-box">
                        <label>电话：</label>
                        <input type="text" id="boy_tel" onblur="checkTel('boy_tel')" value="{{$boy_tel}}"><br />
                        <span style="margin-left:100px;" id="boy_tel_error"></span>
                    </div>
                    <div class="input-box">
                        <label>生日：</label>
                        <input type="text"  value="{{$boy_birth}}" id="boy_birth" class="laydate-icon" onclick="laydate({istime: false, format: 'YYYY-MM-DD'})">
                    </div>
                </div>
                <div class="mt-20px">
                    <div class="input-box">
                        <label>新娘名字：</label>
                        <input type="text" id="girl_name" onblur="check('girl_name')" value="{{$girl_name}}"><br />
                        <span style="margin-left:130px;" id="girl_name_error">*</span>
                    </div>
                    <div class="input-box">
                        <label>电话：</label>
                        <input type="text" id="girl_tel" onblur="checkTel('girl_tel')" value="{{$girl_tel}}"><br />
                        <span style="margin-left:100px;" id="girl_tel_error"></span>
                    </div>
                    <div class="input-box">
                        <label>生日：</label>
                        <input type="text"  id="girl_birth" class="laydate-icon" value="{{$girl_birth}}" onclick="laydate({istime: false, format: 'YYYY-MM-DD'})">
                    </div>
                </div>
                                <div class="mt-20px">
                    <label>婚宴时间：</label>
                    
                    <input type="text" id="wedding_date"  value= width="200px;" class="laydate-icon" onclick="laydate({istime: false, format: 'YYYY-MM-DD'})" onblur="check('wedding_date')">
                    <input  type="time" id="wedding_time" width="200px;"  value="" onblur="check('wedding_time')" />
                    <script type="text/javascript">
                        var wedding_time = '{{$wedding_time}}';
                        var wed_time = wedding_time.split(' ');
                        $("#wedding_date").val(wed_time[0]);
                        $("#wedding_time").val(wed_time[1]);
                    </script>
                    <span id="wedding_date_error">*</span>
                </div>
                <div id="map_area" class="mt-20px" style="margin-top:15px;">
                    <div class="input-append">
                        <label>婚宴地图：</label>请在地图中单击婚宴地点。
                        <span id="wedding_address_i"></span>
                        <input  type="hidden" id="wedding_address_x" width="200px;" name="wedding_addx" >
                        <input  type="hidden" id="wedding_address_y" width="200px;" name="wedding_addy" >
                        <script type="text/javascript">
                            var map_dir = '{{$map_dir}}';
                            var map = map_dir.split(',');
                            $("#wedding_address_x").val(map[1]);
                            $("#wedding_address_y").val(map[0]);
                        </script>
                    </div>
                    
                    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=9d0ac57b5d28596dd319a5310136ef95"></script>
                    <style type="text/css">
                        #mapContainer{
                            height:100%;
                            width:100%;
                        }
                    </style>
                    <div style="width:600px;height:300px;margin:10px 0 10px 130px;position:relative;">
                        <p style="position:absolute;top:3px;left:3px;z-index:10;">
                            <input type="text" id="address_search_content" placeholder="请输入搜索地点" />
                            <input type="button" id="address_search_button" value="搜索" />
                        </p>
                        <div id="mapContainer" ></div>
                       
                    </div>
                    <script type="text/javascript">

                        var map = new AMap.Map("mapContainer", {
                            resizeEnable: true,
                            zoom:12
                        });
                        AMap.service(["AMap.PlaceSearch"], function() {
                            var placeSearch = new AMap.PlaceSearch({ //构造地点查询类
                                pageSize:5,
                                pageIndex:1
                            });
                            //详情查询
                            var marketArr = [];

                            $("#address_search_button").on("click",function(){
                                var searchContent = $("#address_search_content").val();
                                if(searchContent != ""){
                                    placeSearch.search(searchContent,function(status,data){

                                        if (status == 'complete' && data.info == 'OK') {
                                            for(var i=0;i<marketArr.length;i++){
                                                marketArr[i].setMap(null);
                                            }
                                            for (var i = 0; i < data.poiList.pois.length; i++) {
                                                addmarker(i,data.poiList.pois[i]);
                                            }
                                            map.setFitView();
                                        }
                                    });
                                }
                            });

                            function addmarker(i, d) {
                                var lngX = d.location.getLng();
                                var latY = d.location.getLat();
                                var markerOption = {
                                    map: map,
                                    icon:"http://webapi.amap.com/theme/v1.3/markers/n/mark_b"+(i+1)+".png",
                                    position: [lngX, latY],
                                    topWhenMouseOver: true

                                };
                                var mar = new AMap.Marker(markerOption);
                                marketArr.push(mar);
                                mar.on( "click", function(){
                                    $("#wedding_address_i").html("已选点"+(i+1));
                                    $("#wedding_address_x").val(d.location.lat);
                                    $("#wedding_address_y").val(d.location.lng);
                                    $("#wedding_address").val(d.name+"("+d.address+")");
                                });
                            }
                            
                        });

                        var marClick;
                        map.on( "click", function(e){
                            if(marClick)
                                marClick.setMap(null);
                            var lngX = e.lnglat.lng;
                            var latY = e.lnglat.lat;
                            var markerOption = {
                                map: map,
                                icon:"http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
                                position: [lngX, latY],
                                topWhenMouseOver: true
                            };
                            marClick = new AMap.Marker(markerOption);
                          
                            $("#wedding_address_i").html("已选地点");
                            $("#wedding_address_x").val(latY);
                            $("#wedding_address_y").val(lngX);
                            // $("#wedding_address").val(d.name+"("+d.address+")");
                        });
                        
                    </script>
                    
                </div>
                <div class="input-append">
                    <label>地点描述：</label>
                    <input  type="text" placeholder="婚礼地点描述" value="{{$wedding_address}}" id="wedding_address" style="width:500px;" name="wedding_add" class="input-xlarge valid">
                </div>
                <div class="mt-20px">
                    <label>交通指南:</label>
                    <textarea id="traffic_way" placeholder="请输入交通指南" class="traffic_way">{{$traffic_way}}</textarea>
                </div>
                <div class="mt-20px">
                    <label>想说的话:</label>
                    <textarea id="invit_letter" value="" placeholder="请输入你的邀请语"  class="invit_letter">{{$invit_letter}}</textarea>
                </div>
                <div class="submit">
                    <input class="btn_submit" type="submit" onclick="step2()" value="下一步">
                </div>  
            </div>

			<!-- 第三步：上传资源 -->
			<div id="con_one_3" class="step three none">
				<div class="step3_cont">
					<lable class="left;" style="font-weight:700">上传头像：</lable>
					<div class="right" id="showimg">
                        <div class="head_img left">
                            <img id="head_pic" src="{{$head_dir}}">
                            <div id="prograss" style="display:none"></div>
                            <img class="head_state" style="display:none" src="/img/default.svg">
                        </div>
                        <div class="head_btn left" id="container_head">
                            <a href="" class="file">点击上传头像
                                <input type="file" name="mypic" id="pickfiles_head">
                            </a>
                            <div class="alert">提示： 只支持20M以内的图片上传，尺寸要求400*400，
                                用于分享时显示的头像，如模板是封面效果，封面图片将显示婚纱照中第一张 
                                <a href="../../help">【如何压缩或者修改图片尺寸】</a></div> 
                        </div>
					</div> 
				</div>
				<div class="step3_cont" id="container">
					<label  class="left;">婚纱照片：</label>
                    <div class="right">
                        <a href="" class="file">点击上传相片
                            <input type="file" name="mypic" id="pickfiles_pics">
                        </a>
                        <div id="wedding_pics">
                            @foreach ($pictures as $img)
                                <div class="img-boxes">
                                  <img style="width:100%;" id="'+pic_num+'" src="{{$img->dir}}">
                                </div>
                            @endforeach
                        </div>
                    </div>
				</div>
				<div class="step3_cont" id="container_video" style="margin-top:20px;">
					<label class="left">婚礼VCR：</label>
                    <div class="right">
                        <a href="" class="file">点击上传视频
                            <input type="file" name="mypic" id="pickfiles_vedio">
                        </a>
                        @if($video_dir == "")
                             <div id="video" style="position:relative;display:none">
                        @else
                             <div id="video">
                        @endif
                            <video id="video1" src="{{$video_dir}}" controls="controls" style="background: rgba(0,0,0,.5);width: 640px;height: 264px;">
                                您的浏览器不支持 video 标签。
                            </video>
                        @if($video_dir == "")
                            <div id="video_loading">
                                <img class="head_state" src="/img/default.svg">
                                <div class="prograss"></div>
                            </div>
                        @else
                            <div id="video_loading">
                                <img class="head_state" src="/img/default.svg">
                                <div class="prograss"></div>
                            </div>
                        @endif
                        </div>
                    </div>
				</div>
				<div class="step3_cont" >
					<label class="left">背景音乐：</label>
					<div class="right" style="position:relative">
                        <div style="display: inline;z-index:10000">
                            <audio id="music_player" src="{{$music_dir}}" controls="controls">
                                您的浏览器不支持播放音乐。
                            </audio>
                        </div>
						<select id="selectMusic" onchange="music_change()"  style="z-index:10000;position:absolute;top:5px;margin-left:15px;">
                            @if($music_id != 0)
                            <option value="{{$music_id}}" music="{{$music_dir}}">{{$music}}</option>
                            @else
                            <option value="0" music="0">---选择---</option>  
                            @endif
						</select>
                        <div style="float:right;margin-right:110px;position:relative">
                            <span style="position:absolute;top:5px;right:30px;width:125px;">
                                <span id="load_music" ></span>
                                <span id="loading_music" style="display:none"><span class="prograss"></span><img style="width:20px;margin-left:5px;" src="/img/default.svg"></span>
                            </span>
                            <span class="video" id="container_music">
                                <a href="" class="file" style="margin-bottom:20px;">点击上传
                                    <input type="file" name="mypic" id="pickfiles_music">
                                </a>
                            </span>
                        </div>
					</div>
				</div>
				<div class="submit" style="margin-top:0">
					<input class="btn_submit" type="submit" onclick="step3()" value="下一步">
				</div>		
			</div>

			<!-- 第四步：答谢信息 -->
			<div id="con_one_4" class="step four none">
				<div class="step3_cont" id="container_wedding_video">
					<label>答谢信息：</label>
					 <textarea id="thanks"  style="margin-left:0;" placeholder="请输入答谢信息">{{$thanks_letter}}</textarea>
				</div>
                <div class="step3_cont" id="container_wedding_video" style="margin-top:20px;">
                    <label class="left">婚礼视频：</label>
                    <div class="right">
                        <a href="" class="file">点击上传视频
                            <input type="file" name="mypic" id="pickfiles_wedding_vedio">
                        </a>
                        @if($wedding_video_dir == "")
                             <div id="wedding_video" style="position:relative;display:none">
                        @else
                             <div id="wedding_video" style="position:relative;">
                        @endif
                            <video id="wedding_video1" src="{{$wedding_video_dir}}" controls="controls" style="background: rgba(0,0,0,.5);width: 640px;height: 264px;">
                                您的浏览器不支持 video 标签。
                            </video>
                        @if($wedding_video_dir == "")
                            <div id="wedding_video_loading" >
                                <img class="head_state"  src="/img/default.svg">
                                <div class="prograss"></div>
                            </div>
                        @else
                            <div id="wedding_video_loading" >
                                <img class="head_state" src="/img/default.svg">
                                <div class="prograss"></div>
                            </div>
                        @endif
                        </div>
                    </div>
                </div>
				<div class="submit">
					<input class="btn_submit" onclick="submit()" type="submit" value="保存">
				</div>	
			</div>

			<!-- 制作成功 -->
			<div class="qrcode_box">
				<div class="box_close"><span>关闭</span></div>
				<div class="left">
					<div class="qrcode_invitation"></div>
					<p>喜帖二维码</p>
				</div>
				<div class="right">
					<div class="qrcode_thanks"></div>
					<p>答谢二维码</p>
				</div>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript" src="/js/plupload.full.min.js"></script>
<script type="text/javascript" src="/js/qiniu.js"></script>
<script type="text/javascript" src="/js/video.js"></script>
<script type="text/javascript" src="/js/edit.js"></script>
@include('../footer')